import React,{useState} from 'react'
import ConfigIcon from '../../config/index'
import * as Icons from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;
//获取icon并转化成react元素
const IconToElement=(name)=>React.createElement(Icons[name])

//遍历icon
const items=ConfigIcon.map(icon=>{
  const child={
      key:icon.path,
      icon:IconToElement(icon.icon),
      label:icon.label
  }
  if(child.children){
    child.children=icon.children.map(item=>{
      return{
        key:item.path,
        label:item.label
      }
    })
  }
  return child
}) 
export default function Index({collapsed}) {
  // const [collapsed, setCollapsed] = useState(false);

  
  return (
    <div>
  <Sider trigger={null} collapsed={collapsed}>
        <h3 style={{color:'white'}}>{collapsed?'后台':'新的后台管理系统'}</h3>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
      </Sider>
    </div>
  )
}
